<template>
  <div class="common-layout">
    <HeadContent title="审批人设定"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="sizeSpace">
          <div class="flex flex-wrap gap-4">
            <el-card style="width: 150vh" shadow="hover">
              <el-form :model="form" :inline="true" class="demo-form-inline">
                <el-form-item label="部门名称">
                  <el-input v-model="name" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="search"><el-icon>
                      <Search />
                    </el-icon>&nbsp;查询</el-button>
                  <el-button type="primary" @click="onSubmit"><el-icon>
                      <RefreshRight />
                    </el-icon>&nbsp;重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>

          <el-card style="width: 150vh" shadow="hover">
            <el-table :data="shenpirenList" style="width: 100%">
              <el-table-column fixed prop="deptId" label="编号" width="200" />
              <el-table-column prop="deptName" label="部门名称" width="200" />
              <el-table-column prop="attAppName" label="考勤审批人" width="200" />
              <el-table-column prop="leaveAppName" label="请假审批人" width="200" />
              <el-table-column fixed="right" label="操作" min-width="200">
                <template style="display: flex" #default="scope">

                  <el-button type="warning"  plain @click="update(scope.row)">
                    <el-icon>
                      <Refresh />
                    </el-icon>&nbsp;修改
                  </el-button>
                  
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 分页 -->

          <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
              :background="background" :disabled="disabled" layout="prev, pager, next, jumper" :total="1000"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-space>
      </el-main>
    </el-container>
  </div>
  <!--弹出框内容-->
  <el-dialog v-model="dialogFormVisible" title="审批人修改" width="500">
    <el-form :model="updateform">
      <el-form-item label="考勤审批人" :label-width="formLabelWidth">
       
        <el-select v-model="updateShenPiRenData.attAppId" placeholder="请选择">
          <el-option v-for="kaoqinren in kaoqinrenList" :key="kaoqinren.empId" :label="kaoqinren.userName":value="kaoqinren.empId"/>
        </el-select>
      </el-form-item>

      <el-form-item label="请假审批人" :label-width="formLabelWidth">
        <el-select v-model="updateShenPiRenData.leaveAppId" placeholder="请选择">
          <el-option v-for="qingjiaren in qingjiarenList" :key="qingjiaren.empId" :label="qingjiaren.userName":value="qingjiaren.empId"/>
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button type="primary" @click="updateInfo(updateShenPiRenData)">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref,reactive } from 'vue'
import {
  Refresh,Search,RefreshRight,

} from '@element-plus/icons-vue'
import type{ ShenPiRen,KaoQinRen } from '@/model'
import type{updateShenPiRen} from '@/model'
// const flag = ref<boolean>(true)
import TagComtent from '@/components/TagComtent.vue'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const updateform = reactive({
  
  attendanceApprover: '',
  leaveApprover: ''

})
function doDialogFormVisible() {
  dialogFormVisible.value = true
  updateform.attendanceApprover = ''
  updateform.leaveApprover = ''

}
import HeadContent from '@/components/HeadContent.vue'
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  dept: '',
})

const onSubmit = () => {
  console.log('submit!')
}


//审批人显示
const shenpirenList=ref<ShenPiRen[]>([])
const getShenPiRenListfn=async()=>{
  const res = await getShenPiRenList()
  shenpirenList.value = res.data
}


getShenPiRenListfn()
//搜索功能
const name=ref('')
const search=async()=>{
  console.log(name.value)
  const res = await selectByName(name.value)
  shenpirenList.value = res.data
}
//点击修改触发函数
const update=async(row:ShenPiRen)=>{
  dialogFormVisible.value=true
  getKaoQinRenListfn()
  getQingJiaRenListfn()
  updateShenPiRenData.value.deptId=row.deptId
}
//拥有考勤权限的人的列表
const kaoqinrenList=ref<KaoQinRen[]>([])
  const getKaoQinRenListfn=async()=>{
  
  const res = await getKaoQinRenList()
  kaoqinrenList.value = res.data
}
//拥有请假权限的人的列表
const qingjiarenList=ref<KaoQinRen[]>([])
  const getQingJiaRenListfn=async()=>{
  
  const res = await getQingJiaRenList()
  qingjiarenList.value = res.data
}
//提交修改
const updateShenPiRenData=ref<updateShenPiRen>(
  {
    deptId:0,
    attAppId:0,
    leaveAppId:0
  }
)
const updateInfo=async(updateShenPiRenData:updateShenPiRen)=>{
  const res = await updateShenPi(updateShenPiRenData)
  console.log(updateShenPiRenData)
  getShenPiRenListfn()
  dialogFormVisible.value=false
}


const sizeSpace = ref(40)

import type { ComponentSize } from 'element-plus'
import { getShenPiRenList } from '@/api/shenpiren'
import { selectByName } from '@/api/shenpiren'
import { getKaoQinRenList } from '@/api/shenpiren'
import { getQingJiaRenList } from '@/api/shenpiren'
import { updateShenPi } from '@/api/shenpiren'
const currentPage = ref(5)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
  display: inline-block;
}
</style>
